<template>
    <div class="video-toolbar">
        <div class="action">     
            <van-tag 
                class="btn fav" 
                :class="{'btn-active': favChecked}" 
                size="large" 
                @click="handleFav"
            >
                <van-icon name="star" v-if="!favChecked"/>{{ favText }}
            </van-tag>
            <van-tag class="btn" size="large" @click="handleShare">
                <van-icon name="share"/>分享
            </van-tag>                           
        </div>
        <share-sheet ref="shareRef" :url="shareUrl" :title="detailData.title" :pic="detailData.pic" />
    </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, computed, nextTick } from 'vue'
import { Tag as VanTag, Icon as VanIcon } from 'vant'
import ShareSheet from '@/components/ShareSheet'
import { setStorage, getStorage } from '@/utils/storage'
export default {
    name: 'VideoToolbar',
    components: {
        VanTag,
        VanIcon,
        ShareSheet
    },
    props: {
        detailData: {
            type: Object
        }
    },
    setup(props) {
        const shareRef = ref(null)
        const params = reactive({
            favChecked: false,
            favText: computed({
                get() {
                    return params.favChecked ? '已追番' : '追番'
                }                
            }),
            shareUrl: window.location.href
        })

        // 初始化收藏
        const initFav = () => {            
            const favs = getStorage('bangumi_history')
            const matchIndex = favs.findIndex(fav => fav.bvid === props.detailData.mediaInfo.season_id)    
            params.favChecked = matchIndex > -1            
        }

        // 存入/移出缓存
        const setFav = ({ type, data, action = 'add' } = {}) => {        
            const vals = getStorage(type)
            const matchIndex = vals.findIndex(val => val.seasonId === data.mediaInfo.season_id)
            if (matchIndex === -1) {              
                const { mediaInfo, mediaInfo: { title, cover } } = data
                const item = {
                    seasonId: mediaInfo.season_id,
                    title,
                    cover,
                    isHistory: 1,
                    timestamp: new Date().getTime()
                }
                vals.unshift(item)
                setStorage(type, vals)
            } else {
                if (action === 'del') {
                    vals.splice(matchIndex, 1)
                    setStorage(type, vals)
                }
            }
        }

        // 处理收藏
        const handleFav = () => {
            params.favChecked = !params.favChecked
            nextTick(() => {
                setFav({
                    type: 'bangumi_history',
                    data: props.detailData,
                    action: params.favChecked ? '' : 'del'
                })
            })                             
        }

        const handleShare = () => {
            shareRef.value && shareRef.value.show()
        }

        onMounted(() => {
            initFav()
        })

        return {
            shareRef,
            ...toRefs(params),
            handleFav,
            handleShare
        }
    }
}
</script>

<style lang="scss" scoped>
.video-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: $color-text-secondary;
    font-size: 12px;
    .action{
      display: flex;
      align-items: center;
      .btn {
        margin-right: 5px;
        color: $color-text-secondary;
        background-color: #fff;
        font-size: 14px;
        &-active{
          color: $color-white;
          background-color: $theme-color;
        }
      }
    }
    .fa {
      margin-right: 5px;
      font-size: 12px;
    }
  }
</style>